import React, { useState, useEffect } from 'react'
import './header.scss'
import { Button } from 'antd';
import Search from './Search/Search.jsx';
import NavTab from "./NavTab/NavTab.jsx";
import Login from '@/component/Homes/Header/Login/Login';

function Header() {
  // 控制显示隐藏
  let [showSearch, setShowSearch] = useState(false);

  // 控制弹窗显示隐藏
  const [open, setOpen] = useState(false);

  const ShowOpen = (bool) => {
    setOpen(bool)
  }

  useEffect(() => {
    // 添加事件监听器
    function handleScroll() {
      setShowSearch(window.scrollY >= 80);
    }

    window.addEventListener("scroll", handleScroll);

    // 清除函数，在组件卸载时调用
    return () => {
      console.log(1);
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div className="header">
      {/* 左侧  */}
      <div className="header-left">
        {/* logon */}
        <div className='header-logo'>
          <div className='yiqixiu_logo'>
            <img className='logoimg' src='//lib.eqh5.com/eqx.layout/images/favorite-guide.png' alt="" />
            <a href="//store.eqxiu.com/">
              <img src="https://lib.eqh5.com/eqx.layout/images/new_logo.svg" alt="" />
            </a>
          </div>
        </div>

        {/* logo 旁边导航栏 */}
        <div className='eqx-header-tab'>
          <NavTab></NavTab>
        </div>
      </div>

      {/* 右侧 */}
      <div className="header-right">
        {/* 搜索框  */}
        {showSearch && <Search></Search>}
        {/* 登录按钮  */}
        <div className="header-user-info">
          <Button type="primary" onClick={() => ShowOpen(true)}>登陆/注册</Button>
          <Login open={open} ShowOpen={ShowOpen}></Login>
          <div className="register-ad-box">
            <img
              src="https://asset.eqh5.com/364ad775250a4424a5b57af1a45c7d6b.png?imageMogr2/quality/80/format/webp/"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Header;
